<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>八卦</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    canvas {
        margin-left: 30%;
        border: 1px solid #9999;
    }
</style>

<body>
    <canvas id="tutorial" width="800" height="850"></canvas>
</body>
<script>
    function draw() {
        var canvas = document.getElementById('tutorial')
        if (!canvas.getContext) return
        var ctx = canvas.getContext('2d')
        //上边的三条杠
        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 右上方的三条杠
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 130, 15, 15)
        ctx.clearRect(300, 145, 200, 10)
        ctx.save()

        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 右边的三条杠
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 130, 15, 15)
        ctx.clearRect(300, 145, 200, 10)
        ctx.save()

        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 右下的三条杠
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 130, 15, 15)
        ctx.clearRect(300, 145, 200, 10)
        ctx.save()

        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 下面的三条杠
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 99, 15, 22)
        ctx.clearRect(300, 145, 200, 10)
        ctx.clearRect(390, 155, 15, 15)
        ctx.save()

        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 左下的三条杠
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 130, 15, 15)
        ctx.clearRect(300, 145, 200, 10)
        ctx.save()

        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 左方的三条杠
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 130, 15, 15)
        ctx.clearRect(300, 145, 200, 10)
        ctx.save()

        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 左上的三条杠
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 130, 15, 15)
        ctx.clearRect(300, 145, 200, 10)
        ctx.save()

        ctx.translate(440, -150);
        ctx.rotate(Math.PI / 180 * 45);
        ctx.beginPath()
        ctx.moveTo(300, 100)
        ctx.lineTo(500, 100)
        ctx.lineTo(480, 170)
        ctx.lineTo(320, 170)
        ctx.lineTo(300, 100)
        // 上
        ctx.fillStyle = 'balck'
        ctx.fill()
        ctx.stroke()//绘制路径
        ctx.clearRect(300, 120, 200, 10)
        ctx.clearRect(390, 130, 15, 15)
        ctx.clearRect(300, 145, 200, 10)
        ctx.save()






        // 白色区域的边框线
        ctx.beginPath()
        ctx.arc(405, 455, 270, 0, 2 * Math.PI, false)
        ctx.closePath()
        ctx.stroke()

        // 左边的黑色半圆
        ctx.beginPath()
        ctx.arc(405, 455, 270, 0.5 * Math.PI, 1.5 * Math.PI, false)
        ctx.closePath()
        ctx.fillStyle = 'balck'
        ctx.fill()

        // 左上边的白色半圆
        // 白色区域的半圆
        ctx.beginPath()
        ctx.arc(405, 355, 170, 0, 1.5 * Math.PI, false)
        ctx.closePath()
        ctx.fillStyle = 'white'
        ctx.fill()

        // 右下边黑色半圆
        // 黑色区域的半圆
        ctx.beginPath()
        ctx.arc(405, 625, 100, 0.5 * Math.PI, 1.5 * Math.PI, true)
        ctx.closePath()
        ctx.fillStyle = 'black'
        ctx.fill()

        // 上边白色空白区域画一个小圆
        // 白色区域的小黑点
        ctx.beginPath()
        ctx.arc(405, 330, 25, 0, 2 * Math.PI, false)
        ctx.closePath()
        ctx.fillStyle = 'black'
        ctx.fill()

        // 下边白色空白区域画一个小圆
        // 黑色区域的小白点
        ctx.beginPath()
        ctx.arc(405, 595, 25, 0, 2 * Math.PI, false)
        ctx.closePath()
        ctx.fillStyle = 'white'
        ctx.fill()
    }
    draw()
</script>

</html>